<script setup lang="ts">
import { listenerRouteChange } from 'vc/src/router';
import { useMultipleTabStore } from 'vc/src/store/multiple-tab';
import { computed } from 'vue';
import { type RouteLocationNormalizedLoaded } from 'vue-router';
import ProfileSide from '../components/profile-side.vue';
import HeaderTitle from '../components/header-title.vue';

const routeName = ref();
const tabStore = useMultipleTabStore();

const route = useRoute();
listenerRouteChange((route) => {
  if (route.meta?.currentActivePath) {
    routeName.value = route.name;
  }
});

const excludeNames = computed(() => {
  return (route: RouteLocationNormalizedLoaded) => {
    return tabStore.reloadFlag ? undefined : (route.name as string);
  };
});
</script>

<template>
  <div class="profile">
    <ProfileSide />
    <div class="profile-con">
      <header-title :title="route.meta.title" />
      <router-view v-slot="{ route, Component }">
        <keep-alive :include="[routeName]" :exclude="excludeNames(route)">
          <component v-if="tabStore.reloadFlag" :is="Component" :key="route.fullPath" />
        </keep-alive>
      </router-view>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.profile {
  :deep(.profile-con) {
    .vc-dialog {
      z-index: 1;
    }
  }

  :deep(.user-side-menu) {
    .vc-icon__image {
      font-size: 14px;
    }
  }
}
</style>

<style lang="scss">
.profile {
  padding-top: 20px;
  display: flex;
  justify-content: center;
  gap: 20px;
  background-color: #f8f8f8;
  .vc-side-menu--fixed{
    position: unset;
    left:auto;
  }
  .profile-con {
    width: 900px;
    min-height: 650px;
    background-color: white;
    border-radius: 8px;
    .input {
      height: 40px;
      width: 320px;
    }
  }
}
</style>
